<template>
    <div class="main_content">
        <div class="content">
            <div class="search">
                <div class="list">
                    <span>关键字搜索:</span>
                    <Input v-model="sn" placeholder="请输入硬件SN" style="width:200px" maxlength="15" clearable />
                    <input type="password" autocomplete="new-password" style="display: none" />
                </div>
                <div class="list">
                    <el-button type="primary" @click="searchAll" plain size="small">搜索</el-button>
                    <el-button type="info" @click="clear" style="margin-left:20px;" size="small" plain>重置</el-button>
                </div>
            </div>
            <div class="table">
                <el-table :data="list" :height="tableHeight">
                    <el-table-column fixed prop="sn" label="硬件SN"></el-table-column>
                    <el-table-column prop="code" label="硬件编码"></el-table-column>
                    <el-table-column  prop="registerStatus" label="状态">
                        <template slot-scope="scope">
                            <el-tag type="success" size="small" v-if="scope.row.registerStatus == 1">注册</el-tag>
                            <el-tag type="info" size="small" v-else>未注册</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="batteryPower" label="电量百分比" ></el-table-column>
                    <el-table-column prop="time" label="上次通讯时间" ></el-table-column>
                    <el-table-column label="照明" align="center">
                        <template slot-scope="scope">
                            <el-switch  v-model="scope.row.light" active-color="#13ce66" inactive-color="#999" @change="updateStatus(scope.$index, list)" :disabled="scope.row.registerStatus != 1" v-preventReClick="1500"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button @click.native.prevent="getBroadcast(scope.$index, list)" type="text" size="small" :disabled="scope.row.registerStatus != 1">广播</el-button>
                            <el-button @click.native.prevent="getVoice(scope.$index, list)" type="text" size="small" :disabled="scope.row.registerStatus != 1">语音</el-button>
                            <el-button @click.native.prevent="getVideo(scope.$index, list)" type="text" size="small" :disabled="scope.row.registerStatus != 1">视频</el-button>
                            <el-button @click.native.prevent="getdetails(scope.$index, list)" type="text" size="small" >详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="clearfix" v-show="list.length>0">
                <div class="float-right">
                    <Page v-if="totalCount" style="margin-top: 10px;text-align: center;" :current="current" :total="totalCount" :page-size="pageSize" show-elevator show-total @on-change="pageChange"></Page>
                </div>
            </div>
        </div>
            
        <Modal v-model="Modal" title="广播内容" width="500px;" :mask-closable="false">
            <el-input v-model="content" type="textarea" placeholder="请输入广播内容" maxlength="100" show-word-limit></el-input>
            <div slot="footer">
                <el-button @click="cancel(0)" type="info" size="small" plain>取消</el-button>
                <el-button @click="submit" type="primary" size="small" plain>确定</el-button>
            </div>
        </Modal>
    </div>
</template>

<script>
import { getHDCFSHlist,getHDCFSHControl} from "@/api/hardware.js";
export default {
    data() {
        return {
            list: [],
            pageNum: 1,
            pageSize: 10,
            totalCount: "",
            current: 1,
            sn:"",
            Modal:false,
            switchFlag:false,
            content:"",
            devSN:"",
            tableHeight:window.innerHeight - 280 ,
        };
    },
    methods: {
        getAllList(){
            let params ={
                pageNum:this.pageNum,
                pageSize:this.pageSize,
                keyword:this.sn,
            }
            getHDCFSHlist(params).then(res=>{
                if(res.code == 200) {
                    this.list = res.data.list;
                    this.totalCount =res.data.total;
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        pageChange(index){
            this.pageNum =index;
            this.getAllList();
        },
        searchAll(){
            this.getAllList();
        },
        clear(){
            this.sn = "";
            this.getAllList();
        },
        getdetails(index,rows){
            localStorage.setItem("sn",rows[index].sn);
            localStorage.setItem("type",this.type);
            localStorage.setItem("type_sn",this.sn)
            this.$router.push({path: './fvs_data',})
        },
        getBroadcast(index,rows){
            this.devSN = rows[index].sn;
            this.content = "";
            this.Modal = true;
        },
        submit(){
            if(this.content == ""){
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请输入广播内容"
                });
                return;
            }
            let params ={
                sn:this.devSN,
                controlType: 2,
                broadcast:this.content
            }
            getHDCFSHControl(params).then(res=>{
                if(res.code == 200) {
                    this.$Message.success("发送成功");
                    this.Modal = false;
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        getVoice(index,rows){

        },
        getVideo(index,rows){

        },
        updateStatus(index,rows){
            let params ={
                sn:rows[index].sn,
                controlType:1,
                light:rows[index].light ? 1 :0
            }
            getHDCFSHControl(params).then(res=>{
                if(res.code == 200) {
                    this.$Message.success("发送成功");
                    this.Modal = false;
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        cancel(type){
            if(type == 0) {
                this.Modal = false
            }
        }
    },
    mounted(){
        this.getAllList();
    }
};
</script>
<style lang="less" scoped>
@import "./../../assets/style/themeBase.less";
@import "./../../assets/style/common.less";
/deep/.el-tag.el-tag--info{
     background-color:rgba(255, 72, 72, 0.1);
    border-radius:2px;
    border-color:#FF4848;
    color:#FF4848;
}
/deep/.el-tag.el-tag--success{
    background-color: rgba(63, 207, 119, 0.1);
    border-color:#28D79C;
    color: #3FCF77;
    border-radius:2px;
}
</style>


